<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<pre>
			路由的导航守卫钩子函数中除了afterEach外其他函数处理完操作后一定要执行next()，否则路由被拦截不放行
			next()参数默认为true即next(true)，如果next(false)则路由被拦截不放行
			1.路由独享守卫
			routes：[{
				path: 'login',
				components: Login,
				beforeEnter(to, from, next){
					next()
				}
			}]
			
			2.全局前置守卫
			router.beforeEach((to, from, next) => {
				console.log(to, from)
				next()
			})
			全局后置守卫
			router.afterEach((to, from, next) => {
				console.log(to, from)
				next()
			})
			
			3.组件守卫
			beforeRouteEnter: 进入组件时调用(此时未渲染组件无法获取this实例)
			beforeRouteUpdate: 对于动态参数路由 /login/:type  由/login/1到/login/2跳转会被触发
			beforeRouteLeave: 离开组件时调用，一般用于判断组件切换前表单是否保存并提示用户
		</pre>
		<div id="app">
			<App />
		</div>
		
		<script src="../node_modules/vue/dist/vue.js"></script>
		<script src="../node_modules/vue-router/dist/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let Login = {
				template: '<p>登陆组件</p>',
				//组件守卫
				beforeRouteEnter(to, from, next){
					//此时还未渲染组件，无法获取this实例
					console.log('beforeRouteEnter钩子触发')
					next()
				},
				beforeRouteUpdate(to, from, next){
					console.log('beforeRouteUpdate钩子触发')
					next()
				},
				beforeRouteLeave(to, from, next){
					console.log('beforeRouteLeave钩子触发')
					next()
				},
				
			}
			let Register = {
				template: '<p>注册组件</p>'
			}
			let router = new VueRouter({
				routes: [{
					path: '/login/:type',
					component: Login
				},{
					path: '/register',
					component: Register,
					//路由独享守卫
					beforeEnter(to, from, next) {
						console.log(to, from)
						next()
					}
				}]
			})
			//全局前置钩子
			router.beforeEach((to, from, next) => {
				console.log(to, from)
				next()
			})
			//全局后置钩子
			router.afterEach((to, from) => {
				//路由已经跳转完成，此处没有next
				console.log(to, from)
			})
			
			let App = {
				template:`
				<div>
					<router-link to="/login/1">点击登陆1</router-link>
					<router-link to="/login/2">点击登陆2</router-link>
					<router-link to="/register">点击注册</router-link>
					<router-view></router-view>
				</div>
				`
			}
			let vm = new Vue({
				el: '#app',
				components: { App },
				router,
				data(){
					return {
						
					}
				},
				watch: {
					
				},
				methods:{
					
				},
			})
		</script>
	</body>
</html>
